<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <header class="panel-heading">
                员工列表
            </header>
            <div class="panel-body">
                <div class="row" <?php if(!$IsCompanyOwner) echo 'style="display: none"'; ?> >
                    <div class="col-lg-6 col-md-12">
                        <button id="Add" class="btn btn-danger"><i class=" icon-plus"></i> 新建员工</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <table id="DataList" lay-filter="DataList" class="table"></table>
                        <script type="text/html" id="HeadToolBar">
                            <div class="layui-btn-container">

                            </div>
                        </script>

                        <script type="text/html" id="ToolBar">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</i> </a>
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit" <?php if(!$IsCompanyOwner) echo 'style="display: none"'; ?> >编辑</i> </a>
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del" <?php if(!$IsCompanyOwner) echo 'style="display: none"'; ?> >删除</i> </a>
                        </script>
                    </div>
                </div>


            </div>
        </section>

    </div>
</div>
<!-- 添加员工提示框 -->
<div id="AddDialog" style="display: none">

    <form class="form-horizontal" role="form">

        <div class="row" style="margin: 15px 15px;">
            <div class="form-group">
                <label class="col-md-3 control-label">账号</label>
                <div class="col-md-9">
                    <input id="Name" type="text" class="form-control" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">姓名</label>
                <div class="col-md-9">
                    <input id="Nick" type="text" class="form-control" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">密码</label>
                <div class="col-md-9">
                    <input id="Password" type="password" class="form-control" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">确认密码</label>
                <div class="col-md-9">
                    <input id="ComfirmPassword" type="password" class="form-control" placeholder="">
                </div>
            </div>
            <div class="form-group ">
                <label class="col-md-3 control-label">性别</label>
                <div class="col-md-9">
                    <select id="Sex" class="form-control m-bot15">
                        <option value="0">请选择</option>
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">电话号码</label>
                <div class="col-md-9">
                    <input id="Phone" type="tel" class="form-control" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">微信</label>
                <div class="col-md-9">
                    <input id="WeChat" type="text" class="form-control" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">QQ</label>
                <div class="col-md-9">
                    <input id="QQ" type="text" class="form-control" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">Email</label>
                <div class="col-md-9">
                    <input id="Email" type="text" class="form-control" placeholder="">
                </div>
            </div>

            <div class="form-group ">
                <label class="col-md-3 control-label">部门</label>
                <div class="col-md-9">
                    <select id="DepartmentID" class="form-control m-bot15"
                            onchange="mb_DepartmentOnClick(this.options[this.options.selectedIndex].value,'PostID','SuperiorID')">
                        <?php
                            foreach($DepartmentData as $Key => $Val){
                        $tID = $Val['ID'];
                        $tName = $Val['Name'];
                        echo "
                        <option value='$tID'>$tName</option>
                        ";
                        }
                        ?>
                    </select>
                </div>
            </div>
            <div class="form-group ">
                <label class="col-md-3 control-label">职位</label>
                <div class="col-md-9">
                    <select id="PostID" class="form-control m-bot15">
                    </select>
                </div>
            </div>
            <div class="form-group ">
                <label class="col-md-3 control-label">直接上级</label>
                <div class="col-md-9">
                    <select id="SuperiorID" class="form-control m-bot15">
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">备注</label>
                <div class="col-md-9">
                    <textarea id="Remark" class="form-control " name="comment" required></textarea>
                </div>
            </div>
        </div>
    </form>

</div>
<!-- 查看员工提示框 -->
<div id="DetailDialog" style="display: none">

    <form class="form-horizontal" role="form">

        <div class="row" style="margin: 15px 15px;">
            <div class="form-group">
                <label class="col-md-3 control-label">账号</label>
                <div class="col-md-9">
                    <label id="NameLab"></label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">姓名</label>
                <div class="col-md-9">
                    <label id="NickLab"></label>
                </div>
            </div>
            <div class="form-group ">
                <label class="col-md-3 control-label">性别</label>
                <div class="col-md-9">
                    <label id="SexLab"></label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">电话号码</label>
                <div class="col-md-9">
                    <label id="PhoneLab"></label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">微信</label>
                <div class="col-md-9">
                    <label id="WeChatLab"></label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">QQ</label>
                <div class="col-md-9">
                    <label id="QQLab"></label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">Email</label>
                <div class="col-md-9">
                    <label id="EmailLab"></label>
                </div>
            </div>

            <div class="form-group ">
                <label class="col-md-3 control-label">部门</label>
                <div class="col-md-9">
                    <label id="DepartmentLab"></label>
                </div>
            </div>
            <div class="form-group ">
                <label class="col-md-3 control-label">职位</label>
                <div class="col-md-9">
                    <label id="PostLab"></label>
                </div>
            </div>
            <div class="form-group ">
                <label class="col-md-3 control-label">直接上级</label>
                <div class="col-md-9">
                    <label id="SuperiorLab"></label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">备注</label>
                <div class="col-md-9">
                    <label id="RemarkLab"></label>
                </div>
            </div>
        </div>
    </form>

</div>

<script>
    var $;
    layui.use(['table', 'layer', 'jquery'], function () {
        var table = layui.table,
            layer = layui.layer,

        $ = layui.$;

        //第一个实例
        var tableIns = table.render({
            elem: '#DataList'
            , height: 'full-250'
            , url: '/index.php/user/Department/mb_StaffListing' //数据接口
            // , page: true //开启分页
            , toolbar: '#HeadToolBar' //开启头部工具栏，并为其绑定左侧模板
            , page: {
                theme: '#ff6c60'
            }
            , limit: 100
            , limits: [100, 200, 300, 400, 500]
            , cols: [[ //表头 總寬度1670
                {type: 'checkbox', fixed: 'left'}
                // , {field: 'ID', title: 'ID', width: 80, sort: true, fixed: 'left'}
                // , {field: 'Name', title: '账号', width: 125}
                , {field: 'Nick', title: '姓名', width: 100, sort: true}
                , {field: 'Phone', title: '电话号码', width: 250}
                , {field: 'DepartmentName', title: '部门', minWidth: 200}
                , {field: 'PostName', title: '职位', width: 160, sort: true}
                , {field: 'SuperiorName', title: '直接上级', width: 160, sort: true}
                , {title: '操作', width: 168, align: 'center', toolbar: '#ToolBar'}
            ]]
        });

        //监听行工具事件
        table.on('tool(DataList)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            console.log(data);
            if(layEvent === 'detail'){
                //查看
                $('#NameLab').text(data.Na)
                $('#NickLab').text(data.Nick);
                $('#SexLab').text(data.SexStr);
                $('#PhoneLab').text(data.Phone);
                $('#WeChat').text(data.WeChat);
                $('#QQLab').text(data.QQ);
                $('#EmailLab').text(data.Email);
                $('#DepartmentLab').text(data.DepartmentName);
                $('#PostLab').text(data.PostName);
                $('#SuperiorLab').text(data.SuperiorName);
                $('#RemarkLab').val(data.Remark);

                layer.open({
                    type: 1,
                    title: '编辑客户',
                    area: [dialogWidth, '750px'],
                    content: $('#AddDialog'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    btn: ['保存', '取消'],
                    yes: function (index, layero) {

                        var Password = $('#Password').val();
                        var ConfirmPassword = $('#ComfirmPassword').val();

                        if (Password != ConfirmPassword) {
                            layer.msg('新密码和确认密码不一致');
                            return false;
                        }

                        var Name = $('#Name').val();
                        var Nick = $('#Nick').val();
                        var Password = $('#Password').val();
                        var Sex = $('#Sex').val();
                        var WeChat = $('#WeChat').val();
                        var QQ = $('#QQ').val();
                        var Phone = $('#Phone').val();
                        var Email = $('#Email').val();
                        var Remark = $('#Remark').val();
                        var DepartmentID = $('#DepartmentID').val();
                        var PostID = $('#PostID').val();
                        var SuperiorID = $('#SuperiorID').val();


                        if (Name == '') {
                            layer.msg('请输入账号', {icon: 2});
                            return;
                        }
                        if (Nick == '') {
                            layer.msg('请输入姓名', {icon: 2});
                            return;
                        }

                        var fields = {
                            ID: data.ID,
                            Name: Name,
                            Nick: Nick,
                            Password:Password,
                            Sex:Sex,
                            WeChat:WeChat,
                            QQ:QQ,
                            Phone:Phone,
                            Email:Email,
                            Remark:Remark,
                            DepartmentID:DepartmentID,
                            PostID:PostID,
                            SuperiorID:SuperiorID
                        };
                        console.log(fields);
                        global.post('/index.php/user/Department/mb_SubmitStaff', fields, function (msg) {
                            if (msg['code'] == ErrCode_Normal) {
                                layer.msg('保存成功', {
                                    offset: '15px'
                                    , icon: 1
                                    , time: 1000
                                }, function () {
                                    layer.close(index);
                                    tableIns.reload();
                                });
                                return false;
                            } else {
                                mb_OnMessage(msg);
                                return false;
                            }
                        });
                    },
                    btn2: function (index, layer0) {
                        console.log('取消按下');
                    }
                });


            } else if (layEvent === 'edit') {
                //编辑
                $('#Name').val(data.Name);
                $('#Nick').val(data.Nick);
                $('#Password').val();
                $('#ComfirmPassword').val();
                $('#Sex').val(data.Sex);
                $('#Phone').val(data.Phone);
                $('#WeChat').val(data.WeChat);
                $('#QQ').val(data.QQ);
                $('#Email').val(data.Email);
                $('#DepartmentID').val(data.DepartmentID);
                $('#PostID').val();
                $('#SuperiorID').val();
                $('#Remark').val(data.Remark);

                var fields = {
                    DepartmentID:data.DepartmentID
                }
                global.post('/index.php/user/Department/mb_PostListing', fields, function (msg) {
                    if (msg['code'] == ErrCode_Normal) {
                        $('#PostID').find('option').remove();
                        for (var i = 0; i < msg['data'].length; i++) {
                            var val = msg['data'][i];
                            $('#PostID').append("<option value='" + val.ID + "'>" + val.Name + "</option>");
                        }
                        $('#PostID').val(data.PostID);
                    } else mb_OnMessage(msg);
                });
                global.post('/index.php/user/Department/mb_SuperiorListing', fields, function (msg) {
                    if (msg['code'] == ErrCode_Normal) {
                        $('#SuperiorID').find('option').remove();
                        for (var i = 0; i < msg['data'].length; i++) {
                            var val = msg['data'][i];
                            $('#SuperiorID').append("<option value='" + val.ID + "'>" + val.Nick + "</option>");
                        }
                        console.log("直接上級"+data.SuperiorID);
                        $('#SuperiorID').val(data.SuperiorID);
                    } else mb_OnMessage(msg);
                });
                $('#SuperiorID').val(data.SuperiorID);

                var dialogWidth = '650px';
                if (document.documentElement.scrollWidth < 500) {
                    //手機版
                    dialogWidth = '350px';
                }

                layer.open({
                    type: 1,
                    title: '编辑客户',
                    area: [dialogWidth, '750px'],
                    content: $('#AddDialog'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    btn: ['保存', '取消'],
                    yes: function (index, layero) {

                        var Password = $('#Password').val();
                        var ConfirmPassword = $('#ComfirmPassword').val();

                        if (Password != ConfirmPassword) {
                            layer.msg('新密码和确认密码不一致');
                            return false;
                        }

                        var Name = $('#Name').val();
                        var Nick = $('#Nick').val();
                        var Password = $('#Password').val();
                        var Sex = $('#Sex').val();
                        var WeChat = $('#WeChat').val();
                        var QQ = $('#QQ').val();
                        var Phone = $('#Phone').val();
                        var Email = $('#Email').val();
                        var Remark = $('#Remark').val();
                        var DepartmentID = $('#DepartmentID').val();
                        var PostID = $('#PostID').val();
                        var SuperiorID = $('#SuperiorID').val();


                        if (Name == '') {
                            layer.msg('请输入账号', {icon: 2});
                            return;
                        }
                        if (Nick == '') {
                            layer.msg('请输入姓名', {icon: 2});
                            return;
                        }

                        var fields = {
                            ID: data.ID,
                            Name: Name,
                            Nick: Nick,
                            Password:Password,
                            Sex:Sex,
                            WeChat:WeChat,
                            QQ:QQ,
                            Phone:Phone,
                            Email:Email,
                            Remark:Remark,
                            DepartmentID:DepartmentID,
                            PostID:PostID,
                            SuperiorID:SuperiorID
                        };
                        console.log(fields);
                        global.post('/index.php/user/Department/mb_SubmitStaff', fields, function (msg) {
                            if (msg['code'] == ErrCode_Normal) {
                                layer.msg('保存成功', {
                                    offset: '15px'
                                    , icon: 1
                                    , time: 1000
                                }, function () {
                                    layer.close(index);
                                    tableIns.reload();
                                });
                                return false;
                            } else {
                                mb_OnMessage(msg);
                                return false;
                            }
                        });
                    },
                    btn2: function (index, layer0) {
                        console.log('取消按下');
                    }
                });


            } else if (layEvent === 'del') {
                //删除
                var fields = {
                    Type: 'User',
                    IDs: data.ID
                };
                global.post('/index.php/user/Event/mb_Delete', fields, function (msg) {
                    if (msg['code'] == ErrCode_Normal) {
                        layer.msg(msg['msg'], {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        }, function () {
                            tableIns.reload();
                        });
                    } else mb_OnMessage(msg);
                });
            }
        });

        //头工具栏事件
        table.on('toolbar(DataList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
        });

        //新增用户
        $('#Add').bind('click', function () {
            $('#Name').val('');
            $('#Nick').val('');
            $('#Password').val('');
            $('#ComfirmPassword').val('');
            $('#Sex').val(0);
            $('#Phone').val('');
            $('#WeChat').val('');
            $('#QQ').val('');
            $('#Email').val('');
            $('#DepartmentID').val({$DepartmentData[0]['ID']});
            $('#PostID').val('');
            $('#SuperiorID').val('');
            $('#Remark').val('');

            mb_DepartmentOnClick({$DepartmentData[0]['ID']}, 'PostID','SuperiorID');

            var dialogWidth = '650px';
            if (document.documentElement.scrollWidth < 500) {
                //手機版
                dialogWidth = '350px';
            }

            layer.open({
                type: 1,
                title: '新增客户',
                area: [dialogWidth, '750px'],
                content: $('#AddDialog'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                btn: ['保存', '取消'],
                yes: function (index, layero) {
                    var Name = $('#Name').val();
                    var Nick = $('#Nick').val();
                    var Password = $('#Password').val();
                    var ConfirmPassword = $('#ComfirmPassword').val();
                    var Sex = $('#Sex').val();
                    var Phone = $('#Phone').val();
                    var WeChat = $('#WeChat').val();
                    var QQ = $('#QQ').val();
                    var Email = $('#Email').val();
                    var DepartmentID = $('#DepartmentID').val();
                    var PostID = $('#PostID').val();
                    var SuperiorID = $('#SuperiorID').val();
                    var Remark = $('#Remark').val();

                    if (Name == '') {
                        layer.msg('请输入账号', {icon: 2});
                        return;
                    }
                    if (Nick == '') {
                        layer.msg('请输入姓名', {icon: 2});
                        return;
                    }
                    if (Password == '' ) {
                        layer.msg('请输入密码1111', {icon: 1});
                        return;
                    }
                    if (Password != ConfirmPassword ) {
                        layer.msg('密码与确认密码不一致', {icon: 2});
                        return;
                    }

                    if(PostID == 0){
                        layer.msg('请选择部门', {icon: 2});
                        return;
                    }

                    var fields = {
                        ID: 0,
                        Name: Name,
                        Nick: Nick,
                        Password: Password,
                        Sex: Sex,
                        Phone: Phone,
                        WeChat: WeChat,
                        QQ: QQ,
                        Email: Email,
                        DepartmentID: DepartmentID,
                        PostID: PostID,
                        SuperiorID: SuperiorID,
                        Remark: Remark
                    }
                    global.post('/index.php/user/Department/mb_SubmitStaff', fields, function (msg) {
                        if (msg['code'] == ErrCode_Normal) {
                            layer.msg('保存成功', {
                                offset: '15px'
                                , icon: 1
                                , time: 1000
                            }, function () {
                                tableIns.reload();
                                layer.close(index);
                            });
                            return false;
                        } else {
                            mb_OnMessage(msg);
                            return false;
                        }
                    });
                },
                btn2: function (index, layer0) {
                    console.log('取消按下');
                }
            });
        });

        //搜寻按钮按下
        $('#SearchBtn').bind('click', function () {
            var Keyword = $('#Search').val();
            if (Keyword == '') {
                layer.msg('请输入客户名称/电话号码', {icon: 2});
                return false;
            }
            table.reload('DataList', {
                where: {
                    Keyword: Keyword
                }
            });
        });
    });

    /**
     * 部门选中
     * @param $DepartmentID
     */
    function mb_DepartmentOnClick(DepartmentID, PostIDStr, SuperiorIDStr) {
        var fields = {
            DepartmentID: DepartmentID
        };
        global.post('/index.php/user/Department/mb_PostListing', fields, function (msg) {
            if (msg['code'] == ErrCode_Normal) {
                $('#' + PostIDStr).find('option').remove();
                // $(PostIDStr).append("<option value='0'>请选择</option>");
                for (var i = 0; i < msg['data'].length; i++) {
                    var val = msg['data'][i];
                    $('#' + PostIDStr).append("<option value='" + val.ID + "'>" + val.Name + "</option>");
                }

            } else mb_OnMessage(msg);
        });

        global.post('/index.php/user/Department/mb_SuperiorListing', fields, function (msg) {
            if (msg['code'] == ErrCode_Normal) {
                $('#' + SuperiorIDStr).find('option').remove();
                // $(PostIDStr).append("<option value='0'>请选择</option>");
                for (var i = 0; i < msg['data'].length; i++) {
                    var val = msg['data'][i];
                    $('#' + SuperiorIDStr).append("<option value='" + val.ID + "'>" + val.Nick + "</option>");
                }

            } else mb_OnMessage(msg);
        });
    }


</script>